<template>
	<view class="content">
		<Head title="支付明细" @back="back" icon="icon-arrow-left-bold"/>
        <div class="time">
            <h3>2021年1月<text class="iconfont icon-sanjiaoxing"></text><span class="pay" @click="pay">立即支付</span></h3>
            <b>支出￥1917.32</b>
        </div>
        <div class="list">
            <div v-for="(item,ind) in list" :key="ind"><p><span><img src="/static/logo.png"/>{{item}}</span><span>-100.00</span></p></div>
        </div>
	</view>
</template>

<script>
import Head from '@/components/head/index'

	export default {
        components:{Head},
		data() {
			return {
				list:['微信支付 宏烨找房','微信支付 宏烨找房'],
			}
		},
		onLoad() {

		},
		methods: {
            pay(){
                this.$pay()
            },
            back(){
                wx.navigateBack({
                    delta: 1
                })
            }
		}
	}
</script>

<style scoped lang="scss">
    .time{
        height: 150rpx;
        background-color: #eee;
        display: flex;
        flex-direction: column;
        justify-content:space-around;
    }
	.list{
        background-color: #eee;
        height: 200rpx;
        div{
            background-color: #fff;
            p{
                height: 100rpx;
                width:80%;
                margin: 0 auto;
                line-height: 100rpx;
                display: flex;
                justify-content: space-between;
                img{
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 50%;
                    vertical-align: middle;
                    margin-right: 20rpx;
                }
            }
        }
    }
    .pay{
        background-color: skyblue;
        border-radius: 80rpx;
        height: 80rpx;
        line-height: 80rpx;
        padding:0 20rpx;
        color:#fff;
        margin-left: 50rpx;
    }
</style>
